<template>
  <div class="person-info">
    
     <div @click="backHome" class="list-close list-info-close fr" style="font-size: 16px;background:#ffffff;" >
            返回首页
                <img src="../assets/image/backhome.png" style="width:24px;height:24px;">
    </div>
    <el-row class="perform">
      <el-col :span="4">
        <div>
          <img class="avatar-wrap" :src="avatarPath" />
        </div>
      </el-col>
      <el-col :span="20">
        <div class="person-nickname">昵称：{{ originName }}</div>
        <div @click="addImg" class="avatar-btn">
          <input ref="uploadInput" type="file" style="display:none;" accept="image/*" @change="uploadImg">
          更换头像
        </div>
      </el-col>
    </el-row>
    <div class="form-wrap">
      <el-form :model="perForm" size="medium" :rules="rules" ref="perForm" label-width="100px">
        <el-form-item label="昵称" prop="nickName">
          <el-input v-model="perForm.nickName"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="perForm.gender">
            <el-radio label="1">男</el-radio>
            <el-radio label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('perForm')">确定</el-button>
          <el-button @click="cancleSubmit">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { getUserInfo,editUserInfo } from '@/api';
export default {
  data() {
    return {
      originName:"", 
      avatarPath:"",
      curFile:null,
      perForm: {
        nickName: "",
        gender: "1"
      },
      rules: {
        nickName: [
          { required: true, message: "请输入昵称", trigger: "blur" },
          { min: 1, max: 50, message: "长度在 1到 50 个字符", trigger: "blur" }
        ]
      }
    };
  },
  computed:{
    getUserIdOrName(){
      return this.$store.state.user;
    }
  },
  mounted(){
    this.getUserInforMation()
  },
  methods:{
    getUserInforMation(){
      let defaultPath  = require('../assets/image/no_avatar.jpg')
      let url = '/sys/sysMember/getMember';
      getUserInfo(url).then(res=>{
        if(res.data.code == 200){
          this.perForm.nickName =  res.data.data.nickName;
          this.originName =  res.data.data.nickName;
          this.perForm.gender =  res.data.data.gender;
          this.avatarPath = res.data.data.photo? res.data.data.photo:defaultPath;
          this.$store.commit('setUserinfo',{ 
            id:res.data.data.id, 
            name:res.data.data.realName,
            mobile:res.data.data.mobile,
          })
        }
      })
    },
    submitForm() {
      let url = '/sys/accountSecurity/saveMemberInfo';
      let formData = new FormData();
      formData.append('gender',this.perForm.gender)
      formData.append('nickName',this.perForm.nickName)
      if(this.curFile){
        formData.append('file',this.curFile)
      }
      formData.append('loginName',this.getUserIdOrName.mobile)
      
      editUserInfo(url,formData).then(res=>{
        if(res.data.code  == 200){
          this.$message({
            type: "success",
            duration: 3000,
            message: "修改成功"
          });
          this.curFile = null;
          this.getUserInforMation()
        }else{
          this.curFile = null;
          this.$message({
            type: "error",
            duration: 3000,
            message: "修改失败"
          });
        }
      })
    },
    addImg(){
      this.$refs.uploadInput.click();
    },

    backHome(){
      this.$router.push({name: 'home'});
    },
     
    

    uploadImg(e){
      this.curFile = null;
      var file = this.$refs.uploadInput.files[0];
      this.curFile = file; 
      var reader = new FileReader();
      let that = this;
      e.mobile;
      reader.readAsDataURL(file);
      reader.onload=function(e){
        that.avatarPath =this.result;
        e.mobile;
      }
    },
    cancleSubmit() {
      this.$router.push({ name:"home" })
    }
  },
 
};
</script>

<style lang="scss" scoped>
.person-info {
  height: 1010px;
  background-color: #ffffff;
  border-radius: 10px;
  padding: 15px;
}
.perform {
  height: 230px;
  border-bottom: 2px solid #eee;
}
.person-nickname {
  margin-top: 90px;
  font-size: 20px;
}
.avatar-btn {
  margin-top: 30px;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  width: 140px;
  background: url("../assets/image/btn_bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: #ffffff;
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
}
.form-wrap {
  padding: 20px 10px;
  width: 410px;
}
</style>